<template>
  <div class="subcate-list">
    <div  :class="activeId==cate.id?'subcate-item active':'subcate-item' " v-for="cate in cateList" :key="cate.id"
      @click="handleItemClick(cate)"
    >
      <span>{{cate.name}}</span>
      <span>{{cate.count}}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    cateList: Array
  },
  data(){
    return {
      activeId: -1
    }
  },
  methods:{
    handleItemClick(item){
      this.activeId = item.id
      this.$emit('handleItemClick', item)
    }
  }
}
</script>
<style lang='scss' scoped>
@import '../../../styles/var.scss';

.subcate-list{
  flex: 1;
  margin-left: .15rem;
  overflow: auto;
  color: #666;
  font-size: .13rem;
  .subcate-item{
    height: .41rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: .15rem;
    border-bottom: .01rem solid #e4e4e4;
  }
  .active{
    color: $primary;
  }
}
</style>